<script setup>
import { Menu, MoreFilled,Plus } from '@element-plus/icons-vue'
import { VueDraggable } from 'vue-draggable-plus'
import { onMounted, ref } from 'vue'
import Dialog from "@/components/Dialog.vue"
import { addGroup, delLinkGroup, editLinkGroup } from '@/apis/linkGroup'
import { useUserStore } from "@/stores/user"
import { useRoute } from 'vue-router'

const userStore = useUserStore()
const route = useRoute()


onMounted(async()=>{
    await userStore.getGroup()
    await userStore.getLinkList1(userStore.LinkGroup[0].gid )
    route.query.gid = userStore.LinkGroup[0].gid
})
const Link_data = ref({
    name:'',
    description: ""
})

const handleOpen = async(key) => {
    route.query.gid = userStore.LinkGroup[key - 1].gid
    await userStore.getLinkList1( userStore.LinkGroup[key - 1].gid)
}
const isdialog_aside = ref(false)//-------添加分组对话框弹出

// 添加短链接分组
const addLinkGroup =async()=>{
    await addGroup(Link_data.value)
    Link_data.value = { name: '', description: "" }
    await userStore.getGroup()
    isdialog_aside.value = !isdialog_aside.value
}
const cancel = () =>{
    isdialog_aside.value = false
}
// 编辑短链接分组名字
const isdailog_edit1 = ref(false)
const EditGroup =async()=>{
    console.log(route.query.gid)
    const res = await editLinkGroup({gid:route.query.gid,name:Link_data.value.name})
    Link_data.value.name=''
    isdailog_edit1.value=false
    if(res.success){
        console.log('修改成功');
        await userStore.getGroup()
    }
}
// 删除短链接分组
const DeleteGroup=async(i)=>{
    // const res = 
    await delLinkGroup(userStore.LinkGroup[i].gid)
    await userStore.getGroup()
    // console.log(res);
}
</script>

<template>
    <div class="Aside">

        <div class="groupTitle">
            <h2 class="title">短链分组</h2>
            <span>共{{ userStore.LinkGroup?.length }}组</span>
            <el-icon @click="isdialog_aside = !isdialog_aside">
                <Plus />
            </el-icon>
        </div>
        <el-menu :default-active="1" @select="handleOpen">
            <VueDraggable ref="el" v-model="userStore.LinkGroup">
                <el-menu-item v-for="(item, index) in userStore.LinkGroup" :key="item.gid" :index="index+1">
                    <el-icon>
                        <Menu />
                    </el-icon>
                    <span>{{ item?.name }}</span>
                    <div class="operate">
                        <el-popover placement="bottom" :width="100" trigger="click">
                            <template #reference>
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </template>
                            <span @click="isdailog_edit1=true" class="edit_item">编辑</span>
                            <span @click="DeleteGroup(index)" class="edit_item">删除</span>
                        </el-popover>
                    </div>
                </el-menu-item>
            </VueDraggable>
        </el-menu>
        <el-dialog v-model="isdailog_edit1" width="500" title="修改分组名称">
            <div class="section">
                <h2>分组名称</h2>
                <el-input v-model="Link_data.name" style="width: 100%" />
            </div>
            <template #footer>
                <div class=" dialog-footer">
                    <el-button @click="isdailog_edit1=!isdailog_edit1">取消</el-button>
                    <el-button type="primary" @click="EditGroup()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <Dialog @comfirm="addLinkGroup" @cancel="cancel" title="新增短链分组" width="500" :isdialog="isdialog_aside">
            <template #default>
                <div class="section">
                    <h2>分组名称</h2>
                    <el-input v-model="Link_data.name" style="width: 100%" />
                </div>
                <div class="section">
                    <h2>备注</h2>
                    <el-input v-model="Link_data.description" style="width: 100%" />
                </div>
            </template>
        </Dialog>
    </div>
</template>

<style lang="scss" scoped>
.Aside{
    height: 100%;
    border-radius: 5px;
    background-color: #fff;
    .groupTitle{
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        h2{
            font-weight: 500;
            font-size: 18px;
        }
        span{
            font-size: 12px;
            color: rgb(176, 175, 175);
        }
        .el-icon{
            cursor: pointer;
            box-sizing: border-box;
            width: 18px;
            height: 18px;
            padding: 2px;
            color: rgb(52,100,224);
            border: 2px solid rgb(52, 100, 224);
        }
        .el-icon:hover{
            background-color: #f2eeee;
        }
    }
    .el-menu-item{
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-icon {
            color: rgb(235, 235, 235);
        }
        .operate{
            .el-icon{
                opacity: 0;
                font-size: 14px;
            }
            
        }
    }
    .el-menu-item:hover>.operate{
        .el-icon {
            opacity: 1;
            color: rgb(39,82,208);
        }
    }
    .section {
        margin: 10px 0;

        h2 {
            color: black;
            line-height: 40px;
        }
    }
}
.edit_item {
    display: inline-block;
    text-align: center;
    width: 50%;
    cursor: pointer;
}
.edit_item:hover{
    color: rgb(39, 82, 208);
}

</style>
